<template>
  <view :class="{'is-animation': isAnimation}" class="p-pop-x">
    <view class="title">
      <text class="em">恭喜！领取福气卡</text>
    </view>
    <view class="animation">
      <view class="box" @click="handleSubmit">
        <view class="dd">惊喜福气卡</view>
        <view class="dt">您有一个专属福气红包</view>
        <view class="amount">
          {{ detail.totalDiscountAmount }}
          <view class="sub">元</view>
        </view>
        <view class="tips">红包金额</view>
        <view class="tada">
          <view class="button">开心收下</view>
        </view>
      </view>
      <view class="timeout">{{ sum }}秒后自动领取</view>
    </view>
    <view class="_close" @click="handleClose">
      <x-icon name="icon-003" size="50" color="#fff"/>
    </view>
  </view>
</template>

<script>
import XIcon from '@/components/x-icon';

export default {
  name: 'PPop7',
  components: {
    XIcon
  },
  props: {
    detail: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      isAnimation: false,
      sum: 2,
      timeout: null
    };
  },
  mounted() {
    this.sum = 2;
    this.isAnimation = true;
    this.countdown();
  },
  destroyed() {
    if (this.timeout) {
      clearTimeout(this.timeout);
    }
  },
  methods: {
    handleClose() {
      if (this.timeout) {
        clearTimeout(this.timeout);
      }
      this.$emit('close');
      // setTimeout
    },
    countdown() {
      if (this.timeout) {
        clearTimeout(this.timeout);
      }
      this.timeout = setTimeout(() => {
        this.sum--;
        if (this.sum === 1) {
          this.$emit('ready');
        }
        if (this.sum >= 0) {
          this.countdown();
        } else {
          // 领取
          console.log('自动领取成功');
          this.$emit('submit');
        }
      }, 1000);
    },
    handleSubmit() {
      if (this.timeout) {
        clearTimeout(this.timeout);
      }
      this.$emit('submit');
    }
  }
};
</script>

<style lang="scss" scoped>
  .p-pop-x{
    background: #000; height: 100vh;
    .title{
      position: absolute; width: 100%; top: 360px; color: #FDF6CD; font-size: 70px; text-align: center; font-weight: bold;
      .em{ position: relative;}
      &:before{ position: absolute; content: ''; width: 60%; height: 50%; background-color: #6c0a07; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); filter: blur(20px);}
    }
    .animation{ opacity: 0;}
    .box{
      width: 570px; height: 660px; position: absolute; left: 50%; top: 600px; transform: translate3d(-50%, 0, 0); background-color: #fff; border-radius: 36px; overflow: hidden;
      &:after,
      &:before{ content: ''; position: absolute; width: 600px; height: 600px; border-radius: 50%; filter: blur(50px);}
      &:before{ transform: translate3d(-50%, 50%, 0); left: 0; bottom: 0; background: radial-gradient(circle, #FFCFC7, rgba(255, 255, 255, 0)); }
      &:after{ transform: translate3d(50%, 50%, 0); right: 0; bottom: 0; background: radial-gradient(circle, #FEF0D6, rgba(255, 255, 255, 0)); }
      .dd{
        display: flex; align-items: center; color: #000; position: absolute; left: 30px; top: 30px; font-size: 30px;
        &:before{ content: ''; width: 50px; height: 50px; background: cdn('/images/pic-002.png'); background-size: cover; margin-right: 16px;}
      }
      .dt{ color: #910000; font-size: 36px; position: absolute; left: 30px; top: 100px;}
      .amount{
        position: absolute; color: $uni-color-primary; left: 50%; top: 220px; line-height: 1; font-size: 180px; font-weight: bold; text-align: center; transform: translate3d(-50%, 0, 0);
        .sub{ font-weight: normal; font-size: 40px; position: absolute; right: -40px; bottom: 26px;}
      }
      .tips{ position: absolute; width: 100%; text-align: center; color: #99602C; top: 400px; font-size: 26px;}
      .tada{ position: relative; z-index: 1;}
      .button{ position: absolute; transform: translate3d(-50%, 0, 0); left: 50%; top: 530px; width: 480px; height: 80px; line-height: 80px; text-align: center; background-color: #E94C2B; color: #fff; font-size: 36px; border-radius: 10px; z-index: 1;}
    }
    .timeout{ color: #BCBABC; font-size: 28px; text-align: center; width: 100%; position: absolute; left: 0; top: 1300px;}
    ._close{ position: absolute; right: 50px; top: 250px;}

    &.is-animation{
      .animation{ opacity:0; animation: bounceInDown .3s .1s ease-in forwards;}
      .tada{ animation: tada .8s .6s forwards;}
    }
  }
  @keyframes bounceInDown {
    0% {
      opacity:0;
      transform:translate3d(0, -2000px, 0) scaleY(2)
    }
    60% {
      transform:translate3d(0, 25px, 0) scaleY(.9)
    }
    75% {
      opacity:1;
      transform:translate3d(0, -20px, 0) scaleY(.95)
    }
    90% {
      transform:translate3d(0, 15px, 0) scaleY(.985)
    }
    to {
      opacity:1;
      transform:translateZ(0)
    }
  }
  @keyframes tada {
    0% {
      transform:scaleX(1)
    }
    10%, 20% {
      transform:scale3d(.99, .99, .99) rotate(-1deg)
    }
    30%, 70%{
      transform:scale3d(1.01, 1.01, 1.01) rotate(1deg)
    }
    50%, 90% {
      transform:scale3d(1.01, 1.01, 1.01) rotate(-1deg)
    }
    to {
      transform:scaleX(1)
    }
  }
</style>
